<template>
  <div class="activity-management">
    <h2>活动管理</h2>
    <ul>
      <li v-for="activity in activities" :key="activity.id">
        {{ activity.title }}
        <button @click="deleteActivity(activity.id)">删除</button>
      </li>
    </ul>
    <form @submit.prevent="addActivity">
      <input v-model="newActivity.title" placeholder="活动标题" />
      <input v-model="newActivity.description" placeholder="活动描述" />
      <input v-model="newActivity.date" placeholder="活动日期" />
      <input v-model="newActivity.location" placeholder="活动地点" />
      <button type="submit">添加活动</button>
    </form>
  </div>
</template>

<script>
import activities from '@/data/activities';

export default {
  data() {
    return {
      activities,
      newActivity: {
        id: activities.length + 1,
        title: '',
        description: '',
        date: '',
        location: ''
      }
    };
  },
  methods: {
    addActivity() {
      this.activities.push(this.newActivity);
      this.newActivity = {
        id: this.activities.length + 1,
        title: '',
        description: '',
        date: '',
        location: ''
      };
    },
    deleteActivity(id) {
      const index = this.activities.findIndex(activity => activity.id === id);
      if (index !== -1) {
        this.activities.splice(index, 1);
      }
    }
  }
};
</script>